import React from 'react';
import Popconfirm from './../Modal/popconfirm.js'
import './image-upload.less';

class ImageUpload extends React.Component {
    constructor(props) {
        super(props);
        this.displayName = 'ImageUpload';
        this.state = {}
        this._onChange = this._onChange.bind(this)
    }
    _onChange(event) {
        event.preventDefault()
        var target = event.target
        var files = target.files
        var count = this.props.multiple ? files.length : 1
        var i
        for (i = 0; i < count; i++) {
            files[i].thumb = URL.createObjectURL(files[i])
        }
        // convert to array
        files = Array.prototype.slice.call(files, 0)
        files = files.filter(function (file) {
            return /image/i.test(file.type)
        })
        console.log(files)
        this.props.onChange(files, event)
    }
    delete(event) {
        var files = ""
        this.props.onChange(files, event)
    }
    render() {
        var { className, value, multiple, btnValue } = this.props
        return <div className="tederen-imgup">
            <ul className="imgup-list">
                {
                    value.map((img,i)=>{
                        return <li key={i} className="imgup-item"><div><img src={img.thumb}/></div></li>
                    })
                }
                <li className="imgup-item">
                    <a href="javascript:;" className={className}>
                        <input type="file" className="upload-input" multiple={multiple} ref="fileInput" onChange={this._onChange} />
                        <span className="upload-span">{btnValue}</span>
                    </a>
                </li>
            </ul>
            {
                /*view?<div className="pic-modal">
                    <div className="pic-box">
                        <div className="close" onClick={this.handClose.bind(this)}><i className="ion-close"></i></div>
                        <img src={images[index]}/>
                        <div className="left-btn" onClick={this.toLeft.bind(this)}><i className="ion-chevron-left"></i></div>
                        <div className="right-btn" onClick={this.toRight.bind(this)}><i className="ion-chevron-right"></i></div>
                    </div>
                </div>:null*/
            }
        </div>
    }
}

ImageUpload.defaultProps={
    multiple: true,
    btnValue:"上传图片",
    className:"tederen-image-upload"
}

export default ImageUpload
